{% extends 'base.html' %}

{% block body%} 
<div class="row">
    <div class="col-md-4">
          <table class="table table-hover table-condensed">

                {% for gpio_1_item in gpio_1_items %}
                  <tr>
                      <td width="75%" style="font-size: 12px">
                        {{ gpio_1_item[0] }}
                      </td>
                      <td>
                          <span id="gpio_1_{{ gpio_1_item[0] }}">
                          </span>
                          <input  name = "cb_gpio_1" onclick="cb_gpio_1_evt('{{  gpio_1_item[0] }}')" class="my_checkbox" id="cb_gpio_1_{{  gpio_1_item[0] }}" type="checkbox">
                      </td>
                  </tr>
                {% endfor %}
              <tr>
                  <td colspan="2">
                      <button class="btn btn-success" id="btn_get_gpio_1">
                      Get
                      </button>
                  </td>
              </tr>
          </table>
    </div>
    <div class="col-md-4">
        <table class="table table-hover table-condensed">

                {% for gpio_2_item in gpio_2_items %}
                  <tr>
                      <td  width="75%" style="font-size: 12px">
                        {{ gpio_2_item[0] }}
                      </td>
                      <td>
                          <span id="gpio_2_{{ gpio_2_item[0] }}">
                          </span>
                          <input  name = "cb_gpio_2" onclick="cb_gpio_2_evt('{{ gpio_2_item[0] }}')" class="my_checkbox" id="cb_gpio_2_{{ gpio_2_item[0] }}" type="checkbox">
                      </td>
                  </tr>
                  {% endfor %}
              <tr>
                  <td colspan="2">
                      <button class="btn btn-success" id="btn_get_gpio_2">
                      Get
                      </button>
                  </td>
              </tr>
          </table>
    </div>
    <div class="col-md-4">

        <table class="table table-hover table-condensed">

                {% for gpio_3_item in gpio_3_items %}
                  <tr>
                      <td  width="75%" style="font-size: 12px">
                        {{ gpio_3_item[0] }}
                      </td>
                      <td>
                          <span id="gpio_3_{{ gpio_3_item[0] }}">
                          </span>
                      </td>
                  </tr>
                  {% endfor %}
              <tr>
                  <td colspan="2">
                      <button class="btn btn-success" id="btn_get_gpio_3">
                      Get
                      </button>
                  </td>
              </tr>
          </table>
    </div>
  </div>
{% endblock %}

{% block js%} 
{{ super() }}
<script type="text/javascript">

    function cb_gpio_1_evt(idx)
    {
        if ($("#cb_gpio_1_"+ idx).is(':checked')) 
            val = 1;
        else
            val = 0;
        // alert(idx + ": " +val);
        $.post("api/set_gpio_gpio_1",
        {
            idx:idx,
            val:val
        },
        function(data,status){
            console.log("data: " + data);
            $("#gpio_1_" + idx).html(val);
        });
    }

    function cb_gpio_2_evt(idx)
    {
        if ($("#cb_gpio_2_"+ idx).is(':checked')) 
            val = 1;
        else
            val = 0;
        $.post("api/set_gpio_gpio_2",
        {
            idx:idx,
            val:val
        },
        function(data,status){
            console.log("data: " + data);
            $("#gpio_2_" + idx).html(val);
        });
    }


    function get_gpio_gpio_all(){
      url = "/api/get_gpio_gpio_1"
      $.get(url, function(data, status){
          console.log(data);
          d = JSON.parse(data);
          $.each(d,function(index,value){
              $("#gpio_1_" + index).html(value);
              if(value == 1)
                  $("#cb_gpio_1_" + index).prop("checked", true);
              else
                  $("#cb_gpio_1_" + index).prop("checked", false);            
          });

          //-----------------------------------------------------
          url = "/api/get_gpio_gpio_2"
          $.get(url, function(data, status){
              console.log(data);
              d = JSON.parse(data);
              $.each(d,function(index,value){
                  $("#gpio_2_" + index).html(value);
                  if(value == 1)
                      $("#cb_gpio_2_" + index).prop("checked", true);
                  else
                      $("#cb_gpio_2_" + index).prop("checked", false);            
              });

              //-------------------------------------------------
              url = "/api/get_gpio_gpio_3"
              $.get(url, function(data, status){
                d = JSON.parse(data)
                //console.log(d)
                $.each(d,function(index,value){
                  $("#gpio_3_" + index).html(value);

                  // if(value == 1)
                  //   $("#cb_gpio_3_" + index).prop("checked", true);
                  // else
                  //   $("#cb_gpio_3_" + index).prop("checked", false);
                });
              });

          });

      });
    }

    $(document).ready(function(){

        // get_gpio_gpio_1();
        // get_gpio_gpio_2();
        // get_gpio_gpio_3();
        get_gpio_gpio_all();
        
        function get_gpio_gpio_1()
        {
            url = "/api/get_gpio_gpio_1"
            $.get(url, function(data, status){
                console.log(data);
                d = JSON.parse(data);
                $.each(d,function(index,value){
                    $("#gpio_1_" + index).html(value);
                    if(value == 1)
                        $("#cb_gpio_1_" + index).prop("checked", true);
                    else
                        $("#cb_gpio_1_" + index).prop("checked", false);						
                });
            });
        }

        function get_gpio_gpio_2()
        {
            url = "/api/get_gpio_gpio_2"
            $.get(url, function(data, status){
                console.log(data);
                d = JSON.parse(data);
                $.each(d,function(index,value){
                    $("#gpio_2_" + index).html(value);
                    if(value == 1)
                        $("#cb_gpio_2_" + index).prop("checked", true);
                    else
                        $("#cb_gpio_2_" + index).prop("checked", false);            
                });
            });
        }

        function get_gpio_gpio_3()
        {
          url = "/api/get_gpio_gpio_3"
          $.get(url, function(data, status){
            d = JSON.parse(data)
            //console.log(d)
            $.each(d,function(index,value){
              $("#gpio_3_" + index).html(value);

              // if(value == 1)
              //   $("#cb_gpio_3_" + index).prop("checked", true);
              // else
              //   $("#cb_gpio_3_" + index).prop("checked", false);
            });
          });
        }

        $("#btn_get_gpio_1").click(function () {
            get_gpio_gpio_1();
        });

        $("#btn_get_gpio_2").click(function () {
            get_gpio_gpio_2();
        });

        $("#btn_get_gpio_3").click(function () {
            get_gpio_gpio_3();
        });

    });

</script>
{% endblock %}